<template>
	<view class="content">
		<form @submit="formSubmit" @reset="formReset">
			<view class="uni-form-item uni-column">
				<view class="title">名称</view>
				<input class="uni-input" name="input" placeholder="输入标题" v-model="name" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">账号</view>
				<input class="uni-input" name="input" placeholder="输入账号" v-model="account" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">密码</view>
				<input class="uni-input" name="input" placeholder="输入密码" v-model="password" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">备注</view>
				<view class="uni-textarea uni-input">
					<textarea placeholder="备注" v-model="remark" />
				</view>
			</view>
			<view class="uni-btn-v">
				<button form-type="submit">保存</button>
				<button type="default" form-type="reset">取消</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				account: '',
				password: '',
				remark: ''
			}
		},
		methods: {
			formReset() {
				uni.navigateBack(-1)
			},
			formSubmit() {
				if (!this.name) {
					uni.showToast({
						icon: 'error',
						title: '名称不能为空',
						duration: 2000
					})
					return
				}
				if (!this.account) {
					uni.showToast({
						icon: 'error',
						title: '账号不能为空',
						duration: 2000
					})
					return
				}
				if (!this.password) {
					uni.showToast({
						icon: 'error',
						title: '密码不能为空',
						duration: 2000
					})
					return
				}
				this.write()
			},
			write() {
				var jsonData = []
				var _that = this

				uni.getStorage({
					key: 'datajson',
					success(res) {
						jsonData = res.data
						jsonData.push({
							"id": jsonData.length + 1,
							"name": _that.name,
							"account": _that.account,
							"password": _that.password,
							"remark": _that.remark,
							"time": _that.timeFormat()
						})
						uni.setStorage({
							key: 'datajson',
							data: jsonData,
							success() {
								uni.navigateBack(-1)
							}
						})
					},
					fail(err) {
						jsonData.push({
							"id": jsonData.length + 1,
							"name": _that.name,
							"account": _that.account,
							"password": _that.password,
							"remark": _that.remark,
							"time": _that.timeFormat()
						})
						uni.setStorage({
							key: 'datajson',
							data: jsonData,
							success() {
								uni.navigateBack(-1)
							}
						})
					}
				})

			},
			timeFormat() {
				//dataString是整数，否则要parseInt转换
				var time = new Date();
				var year = time.getFullYear();
				var month = time.getMonth() + 1;
				var day = time.getDate();
				var hour = time.getHours();
				var minute = time.getMinutes();
				var second = time.getSeconds();
				return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day) + ' ' + (hour <
					10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' +
					second : second)

			}
		}
	}
</script>

<style>
	.uni-form-item {
		padding-top: 1rem;
	}

	.content {
		padding: 0.5rem;
		background-color: #ccc;
		height: 100%;
	}

	.uni-input {
		background-color: #fff;
		padding: 1rem;
	}

	.uni-btn-v {
		position: fixed;
		left: 0px;
		bottom: 0px;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100px;
		text-align: center;
	}
</style>